
import { Editor } from "@monaco-editor/react";
import { arktsValidator, registerArkTS,setupTSModel } from '../monaco/arktsLanguage'
import { Button } from "antd";
import commonArkUI from '../types/global/common.d.ts?raw'
const defaultArkTSCode = `
struct MyComponent {
  build() {
    Column() {
      Text("Hello ArkUI")
      Button("Click Me")
      const num = 123
    }
  }
}`
const CodeArea = () => {



  return (
    <div className="code-editor">

      <Editor
        height="100%"
        defaultLanguage="arkts"
        theme="arkui-dark"
        beforeMount={(monaco) => {
          registerArkTS(monaco)
       
        }}
        onMount={(editor, monaco) => arktsValidator(editor, monaco)}
        defaultValue={defaultArkTSCode}
        options={{
          padding: { top: 16, bottom: 16 },
          minimap: { enabled: false },
          scrollBeyondLastLine: false,
        }}
      />
      <div className="code-editor-reload">
        <Button type="primary">Reload</Button>
      </div>
      <div className="code-editor-run">
        <Button type="primary">Run</Button>
      </div>
    </div>)
}

export default CodeArea